<template>
	<popup v-model="show">
		<view class="cannot_buy flex" :style="{ '--fss': app.theme.fss() }">
			<view class="transverse-line flex">
				<view class="transverse-line-view"></view>
			</view>
			<view class="cannot_buy_bg_img">
				<image src="/static/img/cannot_pay_vip_guidance_bg@2x.png" />
			</view>
			<view class="cannot_buy_title">iOS无法支付会员？</view>
			<view class="cannot_buy_tip flex">
				<view class="cannot_buy_tip_left">
					<image src="/static/img/cannot_pay_vip_guidance_icon@2x.png" />
				</view>
				<view class="cannot_buy_tip_right">如果遇到无法支付的情况，可能您开启了系统禁止购买功能，请按照如下操作关闭该功能。</view>
			</view>
			<view class="cannot_buy_block flex">
				<view class="item">
					<image src="/static/img/cannot_pay_vip_guidance_1@2x.png" mode="widthFix" />
					<view class="item_text">在设置中点击屏幕使用时间</view>
				</view>
				<image class="arrow" src="/static/img/cannot_pay_vip_guidance_arrow@2x.png" />
				<view class="item">
					<image src="/static/img/cannot_pay_vip_guidance_2@2x.png" mode="widthFix" />
					<view class="item_text nowrap">点击内容与隐私限制</view>
				</view>
				<image class="arrow" src="/static/img/cannot_pay_vip_guidance_arrow@2x.png" />
				<view class="item">
					<image src="/static/img/cannot_pay_vip_guidance_3@2x.png" mode="widthFix" />
					<view class="item_text line2">点击iTunes Store与App Store购买项目</view>
				</view>
				<view class="item">
					<image src="/static/img/cannot_pay_vip_guidance_4@2x.png" mode="widthFix" />
					<view class="item_text nowrap">点击App内购买项目</view>
				</view>
				<image class="arrow" src="/static/img/cannot_pay_vip_guidance_arrow@2x.png" />
				<view class="item">
					<image src="/static/img/cannot_pay_vip_guidance_5@2x.png" mode="widthFix" />
					<view class="item_text nowrap">将不允许改为允许</view>
				</view>
			</view>
			<view class="cannot_buy_error_btns" v-if="iosIAPInitError">
				<view class="btn_viewdetail" @tap="handleViewIAPError">(查看详细的错误信息)</view>
			</view>
			<view class="cannot_buy_btns flex">
				<view class="btn_retry" @tap="close()">我知道了</view>
				<view class="btn_gosetting" @tap="toIosSettingPage">去开启</view>
			</view>
			<footer-bar></footer-bar>
		</view>
	</popup>
</template>

<script setup>
	import { ref, inject, defineExpose } from "vue";
	const app = inject('app');
	
	/* 变量区域 */
	// 显示状态
	const show = ref(false);
	
	// 错误原因
	const iosIAPInitError = ref("");
	
	
	/* 方法区域 */
	// 查看iap失败信息
	function handleViewIAPError() {
		app.util.alert({ content: iosIAPInitError.value });
	}
	
	// 跳转到IOS设置页
	function toIosSettingPage() {
		plus.runtime.openURL("app-settings://");
	}
	
	// 打开本弹窗
	function open(e) {
		iosIAPInitError.value = e;
		show.value = true;
	}
	
	// 关闭弹窗
	function close() {
		show.value = false;
	}


	// 将方法抛出给父级组件使用
	defineExpose({ open, close });
</script>

<style scoped lang="scss">
	.cannot_buy {
		background: #25282E;
		border-radius: 15rpx 15rpx 0 0;
		overflow: hidden;
		flex-direction: column;
		width: 100%;
		padding:0 20rpx;
		// padding-bottom: 30rpx;
		position: relative;
		.cannot_buy_bg_img {
			position: absolute;
			top: 0;
			right: 0;
			width: 200rpx;
			height: 225rpx;
			image {
				width: 200rpx;
				height: 225rpx;
			}
		}
		.cannot_buy_title {
			width: 100%;
			padding-left: 20rpx;
			text-align: center;
			font-size: calc(32rpx * var(--fss));
			line-height:50rpx;
			font-weight: bold;
			color: #FFF;
		}
		.cannot_buy_tip {
			width: 552rpx;
			margin-left: 22rpx;
			margin-top: 26rpx;
			border-radius: 4rpx;
			background: rgba(255, 255, 255, 0.05);
			font-weight:300;
			.cannot_buy_tip_left {
				padding: 28rpx 0 28rpx 20rpx;
				image {
					width: 36rpx;
					height: 32rpx;
				}
			}
			.cannot_buy_tip_right {
				padding: 17rpx 14rpx;
				font-size: calc(22rpx * var(--fss));
				color: rgba(255, 255, 255, 0.8);
				// color: red;
			}
		}
		.cannot_buy_block {
			margin-top: 48rpx;
			flex-wrap: wrap;
			padding:0 10rpx;
			.arrow {
				margin-top: 40rpx;
				width: 60rpx;
				height: 30rpx;
				margin-left: 16rpx;
				margin-right: 8rpx;
			}
			.item {
				width:calc((100% - 84rpx * 2) / 3);
				margin-bottom: 30rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				image {
					width: 100%;
					display: block;
				}
				.item_text {
					margin-top: 16rpx;
					font-size: calc(22rpx * var(--fss));
					font-weight: 500;
					text-align: center;
					color: rgba(255, 255, 255, 0.5);
				}
				.item_text.nowrap {
					white-space: nowrap;
				}
				.item_text.line2 {
					width: 200rpx;
				}
			}
		}
		.cannot_buy_error_btns {
			width: 100%;
			display: flex;
			justify-content: center;
			padding-top: 10rpx;
			padding-bottom: 20rpx;
			.btn_viewdetail {
				color: rgba(255, 255, 255, 0.5);
				font-size: calc(23rpx * var(--fss));
				text-decoration: underline;
			}
		}
		.cannot_buy_btns {
			padding: 10rpx 0rpx 15rpx 0rpx;
			flex-direction: row;
			align-items: center;
			.btn_retry {
				flex: 1;
				margin-right: 20rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 5rpx;
				background: rgba(255, 255, 255, 0.06);
				color: rgba(255, 255, 255, 0.6);
				font-size: calc(27rpx * var(--fss));
				transition: 0.2s all;
				&:active{
					opacity: 0.8;
				}
			}
			.btn_gosetting {
				flex: 1;
				line-height: 80rpx;
				text-align: center;
				font-size: calc(27rpx * var(--fss));
				border-radius: 5rpx;
				background: #575866;
				color: #FFF;
				font-weight:bold;
				transition: 0.2s all;
				&:active{
					opacity: 0.8;
				}
			}
		}
	}
</style>